import { Control, FullScreen } from 'ol/control'
import { createLayer, removeLayer, getMapLayer } from '../layer'
import OlMessage from '../Message'
// console.log(getMapLayer(this.map, 'className', 'DrawShapLayer'))

export class ToolbarControl extends Control {
  /**
   * @param {Object} [opt_options] Control options.
   */
  constructor (_map, _options) {
    const options = _options //  配置项
    // console.log('控件', options)

    const toolbarContainer = document.createElement('div')
    toolbarContainer.id = 'ol-toolbar-control'
    toolbarContainer.className = `ol-toolbar-control ${options.className}`

    super({
      element: toolbarContainer,
      target: options.target
    })
    this.fullScreenEle = null //  全屏element
    // this.mapEle = null //  地图element
    this.fullScreenConfig = options.toolbarBtnsConfig.fullScreen
    this.map = _map
    this.mapEle = this.map.getTargetElement()
    this.view = this.map.getView()
    this.defaultZoom = this.view.getZoom()
    this.maxZoom = this.view.getMaxZoom()
    this.minZoom = this.view.getMinZoom()
    this.isFullScreen = this.getFullscreenElement() // 默认不是全屏
    this.addToolbarBtns(toolbarContainer, options)
  }

  /**
   * 新增toolbar 工具栏控件
   * @param {*} toolbarContainer
   * @param {*} options
   */
  addToolbarBtns (toolbarContainer, options) {
    if (options.toolbarBtnsConfig.zoomIncrease.show) { // zoom 增加
      const zoomIncrease = document.createElement('div')
      zoomIncrease.className = `ol-toolbar-increase ol-toolbar-item ${options.toolbarBtnsConfig.zoomIncrease.className}`
      zoomIncrease.innerText = options.toolbarBtnsConfig.zoomIncrease.label
      toolbarContainer.appendChild(zoomIncrease)
      zoomIncrease.addEventListener('click', () => {
        this.handleSetZoom()
      })
    }
    if (options.toolbarBtnsConfig.zoomReduce.show) { // zoom 减小
      const zoomReduce = document.createElement('div')
      zoomReduce.className = `ol-toolbar-reduce ol-toolbar-item ${options.toolbarBtnsConfig.zoomReduce.className}`
      zoomReduce.innerText = options.toolbarBtnsConfig.zoomReduce.label
      toolbarContainer.appendChild(zoomReduce)
      zoomReduce.addEventListener('click', () => {
        this.handleSetZoom(false)
      })
    }
    if (options.toolbarBtnsConfig.fullScreen.show) { //  全屏
      if (!this.fullScreenEle) {
        this.fullScreenEle = document.createElement('div')
        this.fullScreenEle.className = `ol-toolbar-fullScreen ol-toolbar-item ${this.fullScreenConfig.className}`
        this.fullScreenEle.innerText = this.fullScreenConfig.label
        toolbarContainer.appendChild(this.fullScreenEle)
        this.fullScreenEle.addEventListener('click', () => {
          this.handleInOROutFullScreen()
        })
      }
      /**
       * 监听进入/ 退出全屏
       */
      this.addFullScreenListener()
    }
    if (options.toolbarBtnsConfig.measuringDistance.show) { // 测量距离
      const measuringDistance = document.createElement('div')
      measuringDistance.className = `ol-toolbar-measuringDistance ol-toolbar-item ${options.toolbarBtnsConfig.measuringDistance.className}`
      measuringDistance.innerText = options.toolbarBtnsConfig.measuringDistance.label
      toolbarContainer.appendChild(measuringDistance)
      measuringDistance.addEventListener('click', () => {
        let message = new OlMessage({
          message: '点击开始绘制，双击结束',
          type: 'success'
        })
        let currentLayerArr = getMapLayer(this.map, 'className', 'DrawShapLayer')
        if (currentLayerArr.length > 0) {
          removeLayer(this.map, currentLayerArr[0], 'className')
        }
        createLayer(this.map, options.toolbarBtnsConfig.measuringDistance.layerConfig)
      })
    }

    if (options.toolbarBtnsConfig.measuringArea.show) { //  测量距离
      const measuringArea = document.createElement('div')
      measuringArea.className = `ol-toolbar-measuringArea ol-toolbar-item ${options.toolbarBtnsConfig.measuringArea.className}`
      measuringArea.innerText = options.toolbarBtnsConfig.measuringArea.label
      toolbarContainer.appendChild(measuringArea)
      measuringArea.addEventListener('click', () => {
        let message = new OlMessage({
          message: '点击开始绘制，双击结束',
          type: 'success'
        })
        let currentLayerArr = getMapLayer(this.map, 'className', 'DrawShapLayer')
        if (currentLayerArr.length > 0) {
          removeLayer(this.map, currentLayerArr[0], 'className')
        }
        createLayer(this.map, options.toolbarBtnsConfig.measuringArea.layerConfig)
      })
    }
    if (options.toolbarBtnsConfig.clearSet.show) { //  清理设置
      const clearSet = document.createElement('div')
      clearSet.className = `ol-toolbar-claerSet ol-toolbar-item ${options.toolbarBtnsConfig.clearSet.className}`
      clearSet.innerText = options.toolbarBtnsConfig.clearSet.label
      toolbarContainer.appendChild(clearSet)
      clearSet.addEventListener('click', () => {
        let currentLayerArr = getMapLayer(this.map, 'className', 'DrawShapLayer')
        if (currentLayerArr.length > 0) {
          removeLayer(this.map, currentLayerArr[0], 'className')
        }
      })
    }
  }

  handleSetZoom (isIncrease = true) {
    let zoom = this.view.getZoom()
    let setZoom
    if (isIncrease) {
      setZoom = zoom + 1
    } else {
      setZoom = zoom - 1
    }
    if (setZoom > this.maxZoom) {
      setZoom = this.maxZoom
    }
    if (setZoom < this.minZoom) {
      setZoom = this.minZoom
    }
    console.log('setZoom', setZoom)
    this.view.setZoom(setZoom)
  }

  // 进入/退出全屏
  handleInOROutFullScreen () {
    this.isFullScreen = this.getFullscreenElement()
    if (window.ActiveXObject) { // IE 10及以下ActiveXObject
      const WsShell = new ActiveXObject('WScript.Shell')
      WsShell.SendKeys('{F11}')
    } else if (this.mapEle.requestFullScreen) { // HTML W3C 提议
      if (!this.isFullScreen) { // 进入
        this.mapEle.requestFullScreen()
      } else { //  退出
        document.exitFullscreen()
      }
    } else if (this.mapEle.msRequestFullscreen) { // IE11
      if (!this.isFullScreen) { // 进入
        this.mapEle.msRequestFullscreen()
      } else { //  退出
        document.msExitFullscreen()
      }
    } else if (this.mapEle.webkitRequestFullScreen) { // Webkit (works in Safari5.1 and Chrome 15)
      if (!this.isFullScreen) { // 进入
        this.mapEle.webkitRequestFullScreen()
      } else { //  退出
        document.webkitCancelFullScreen()
      }
    } else if (this.mapEle.mozRequestFullScreen) { // Firefox (works in nightly)
      if (!this.isFullScreen) { // 进入
        this.mapEle.mozRequestFullScreen()
      } else { //  退出
        document.mozCancelFullScreen()
      }
    } else {
      alert('此设备不支持 Fullscreen API')
    }
  }

  /**
   * 全屏事件触发后
   */
  onFullScreenChange () {
    this.fullScreen = this.getFullscreenElement()
    if (this.fullScreen) { // 全屏状态
      this.fullScreenEle.className = `ol-toolbar-exitFullScreen ol-toolbar-item ${this.fullScreenConfig.className}`
      this.fullScreenEle.innerText = this.fullScreenConfig.reduceLabel
    } else { // 退出全屏状态
      this.fullScreenEle.className = `ol-toolbar-fullScreen ol-toolbar-item ${this.fullScreenConfig.className}`
      this.fullScreenEle.innerText = this.fullScreenConfig.label
    }
  }

  /**
   * 监听全屏事件
   */
  addFullScreenListener () {
    if (this.mapEle.requestFullScreen) { // HTML5 W3C 提议
      document.addEventListener('fullscreenchange', () => {
        this.onFullScreenChange()
      })
    } else if (this.mapEle.msRequestFullscreen) { // IE 11
      document.addEventListener('msfullscreenchange', () => {
        this.onFullScreenChange()
      })
    } else if (this.mapEle.webkitRequestFullScreen) { // Webkit (works in Safari5.1 and Chrome 15)
      document.addEventListener('webkitfullscreenchange', () => {
        this.onFullScreenChange()
      })
    } else if (this.mapEle.mozRequestFullScreen) { // Firefox (works in nightly)
      document.addEventListener('mozfullscreenchange', () => {
        this.onFullScreenChange()
      })
    } else {
      document.addEventListener('webkitfullscreenchange', () => {
        this.onFullScreenChange()
      })
    }
  }

  // 获取全屏状态
  getFullscreenElement () {
    let isFullscreen =
    document.fullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement ||
    document.fullScreen ||
    document.mozFullScreen ||
    document.webkitIsFullScreen
    isFullscreen = !!isFullscreen
    return isFullscreen
  }
}
